import React, { useEffect, memo,useState } from "react"
import { connect } from "react-redux"
import * as actionTypes from './store/actionCreators'
import { useLocation,useHistory } from "react-router-dom"
import imgSearch from '../../assets/images/搜索.png'
import LazyLoad from "react-lazyload"
import loading from '../../assets/images/loading.gif'
import './Search.css'
let keywords = '';
// let obj = {a:3}
// var storage = window.localStorage;
// storage.setItem("a", JSON.stringify(obj));
// var lastname = localStorage.getItem("a"); localStorage 用法




const Search = (props) => {
    // console.log(props,'search')
    // console.log(lastname,'aaaaaaaaa')
    const history = useHistory()
    const {getDetailDataDispatch,searchResult={},searchHot=[]}=props;
    const {songs=[],artists=[]} = searchResult;
    function textChange(){
        let searchKeyWords = document.getElementById("search_keyword").value;
        
        keywords=searchKeyWords;
        getDetailDataDispatch()
        // console.log(searchKeyWords);
    }
    
    function getSearchDetail(item){
        // console.log(item,'77777777')
        keywords = ''
        history.push(`/searchDetail/${item.name}`)
    }
    function getSearchHotDetail(item){
        // console.log(item,'77777777')
        keywords = ''
        history.push(`/searchDetail/${item.searchWord}`)
    }
    function gotoHome(){
        keywords = ''
        // console.log(history,'history')
        history.replace('/home/main')
    }
    function gotoSingerDetail(item){
        keywords = ''
        history.push(`/singer/${item.id}`)
    }
    useEffect(() => {
        if (!props.length) {
            getDetailDataDispatch()
        }
        getDetailDataDispatch()
   
    }, [])
    useEffect(() => {
        if (!props.length) {
            getDetailDataDispatch()
        }
        getDetailDataDispatch()
   
    }, [keywords])
   
    return (
        <div className="search_form">
           <div className="search-input_page">
                <div className="search-place">
                   
                    
                    
                        <img className='search-img' src={imgSearch}></img>
                    
                    <input type="text" onChange={textChange} id="search_keyword"/> 
                    <div className="cancel" onClick={gotoHome}>取消</div>
                </div>
            </div>
            <div className="search_result">
                {
                    artists.map((item,index)=>{
                        return(
                            <div className="search_singer" key={index} onClick={()=>gotoSingerDetail(item)}>
                                 <div className="search_singer_pic">
                                 <LazyLoad placeholder={<img width="100%" height="100%" src={loading} alt="music" once className="loading_pic"/>}>
                                    <img src={item.picUrl} alt="" className="search_singer_url"/>
                                </LazyLoad>
                                </div>
                                <div className="search_singer_name">
                                    歌手：{item.name}
                                </div>
                </div>

                        )
                    })
                }
                
                {
                    songs.map((item,index)=>{
                        
                        return(
                            <div className="searchResult_song" key={index} onClick={()=>getSearchDetail(item)}>
                                <img className='search-img_result' src={imgSearch}></img>
                                <div className="search_result_songName">{item.name}</div>
                            </div>
                        )
                    })
                }

            </div>
            <div className="search_hot">
                <div className="search_hot_title">
                    热门搜索
                </div>
                <div className="search_hot_body">
                    {
                        
                        searchHot.map((item,index)=>{
                            
                            
                            return(
                                <div className="search_hot_result" key={index} onClick={()=>getSearchHotDetail(item)}>
                                    <div className={`search_hot_serial ${index <=3 ? "active_hotSearch": "" }`} id="serial">
                                       {index+1}
                                    </div>
                                    <div className="search_hot_name">
                                        {item.searchWord}
                                    </div>
                                    <div className="search_hot_pic">
                                        <img className='search_hot_pic_img' src={item.iconUrl}></img>
                                    </div>
                                </div>
                            )
                        })
                    }
                    
                </div>
            </div>
        </div>
    )
}
const mapStateToDispatch = (dispatch) => {
    // console.log(dispatch); 
   
    return {
        getDetailDataDispatch() {
            dispatch(actionTypes.getSearch(keywords))
            dispatch(actionTypes.getSearchHot())
            
            
        }
    }
}
const mapStateToProps = (state) => {
    // console.log(state,'5555555555')
    
    return {
        searchResult:state.search.searchResult,
        searchKeyWords:keywords,
        searchHot:state.search.searchHotDetail
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(memo(Search))
